<template>
	<div class="bg-[#C1A879]">
		<div class="container mx-auto flex flex-col items-center justify-center space-y-5 py-5 max-md:px-2">
			<div class="grid grid-cols-2 py-20 border-b w-full max-md:grid-cols-1 gap-5 max-md:py-5">
				<div class="col-span-1 grid grid-cols-3 max-xl:grid-cols-1">
					<div class="col-span-1"></div>
					<div class="col-span-1 flex flex-col gap-2 text-white cursor-pointer max-md:hidden">
						<span class="text-base" @click="goto('/goods')">{{ lg ? "产品中心" : "Product center" }}</span>
						<span class="text-gray-200" v-for="(i, index) in goods" @click="goto(i.url)" :key="index">{{ i.typename }}</span>
					</div>
					<div class="col-span-1 flex flex-col gap-2 text-white cursor-pointer max-md:hidden">
						<span class="text-base" @click="goto('/new')">{{ lg ? "新闻动态" : "News trends" }}</span>
						<span class="text-gray-200" v-for="(i, index) in news" @click="goto(i.url)" :key="index">{{ i.typename }}</span>
					</div>
					<div class="col-span-1 flex flex-col gap-2 text-white cursor-pointer" v-if="0">
						<img
							v-lazy="$store.state.web_attr.wechat_qrcode"
							v-if="$store.state.web_attr.wechat_qrcode"
							style="width: 80px"
							class="aspect-square bg-gray-400"
							alt=""
						/>
						<!-- <div class="flex gap-3 whitespace-nowrap items-center" v-if="$store.state.web_attr.tel">
							<span>{{ lg ? "联系电话" : "Contact number" }}</span>
							<span>{{ $store.state.web_attr.tel }}</span>
						</div> -->
					</div>
				</div>
				<div class="col-span-1 grid-cols-3 w-full justify-between flex flex-col h-full gap-5">
					<!-- <div class="flex-col text-white gap-3 flex justify-center max-md:px-5"></div> -->
					<div class="flex flex-col text-white col-span-1">
						<span>{{ lg ? "在线留言" : "Online message" }}</span>
					</div>
					<div class="grid grid-cols-3 gap-5">
						<div class="border-b text-white col-span-1 flex flex-col justify-between">
							<span class="hidden-1">{{ lg ? "称呼" : "mailbox" }}</span>
							<input
								type="text"
								v-model="name"
								class="rounded-md py-3 px-1 bg-transparent border-none text-white focus:!border-[#C1A879] w-full"
								placeholder=""
							/>
						</div>
						<div class="border-b text-white col-span-1 flex flex-col justify-between">
							<span class="hidden-1">{{ lg ? "手机号码" : "Customized requirements" }}</span>

							<input
								type="text"
								v-model="number"
								class="rounded-md py-3 px-1 text-base bg-transparent border-none text-white focus:border-[#C1A879] w-full"
								placeholder=""
							/>
						</div>
						<div class="col-span-1 flex flex-col items-center relative group" v-if="lg">
							<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202047066.png" class="w-[50px] aspect-auto cursor-pointer" alt="" />
							<div
								class="absolute -bottom-[100px] left-50 bg-white rounded-md group-hover:block transition-all duration-300 hidden gap-1 justify-center overflow-hidden items-center p-1"
							>
								<div class="flex justify-center">
									<img v-lazy="$store.state.web_attr.wechat_qrcode" style="width: 80px" class="aspect-square bg-gray-500" alt="" />
								</div>
								<span class="text-xs">{{ $store.state.web_attr.tel }}</span>
							</div>
						</div>
						<div class="col-span-1 flex flex-col relative group gap-3 text-white" v-if="!lg">
							<div class="flex gap-3">
								<a :href="$store.state.web_attr.Twitter">
									<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202104379.png" alt="" class="aspect-square" style="width: 40px" />
								</a>
								<a :href="$store.state.web_attr.Facebook">
									<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309202104271.png" alt="" class="aspect-square" style="width: 40px" />
								</a>
							</div>
							<span class="hidden-1">{{ $store.state.web_attr.tel }}</span>
							<span class="hidden-1">{{ $store.state.web_attr.email }}</span>
						</div>
					</div>
					<div class="">
						<div class="border rounded-md shadow-md text-white px-10 py-2 cursor-pointer inline-flex" @click="tijoao">
							{{ lg ? "提交" : "submit" }}
						</div>
					</div>
				</div>
			</div>

			<span class="text-white" v-html="$store.state.web_attr.web_copyright"></span>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			name: "",
			number: "",
			goods: [],
			news: []
		};
	},

	created() {
		this.config();
		this.index();
		console.log("lg==> ", this.lg);
	},
	watch: {
		// "$store.state.menuItems"(newValue, oldValue) {
		// 	newValue.forEach((e) => {
		// 		if (e.typename == "产品中心") {
		// 			this.goods = e.child;
		// 		}
		// 		if (e.typename == "新闻动态") {
		// 			this.news = e.child;
		// 		}
		// 	});
		// }
	},
	methods: {
		async index() {
			const [err, res] = await this.$to(this.$axios.get("&a=menu"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			// this.menuItems = res.data;

			res.data.forEach((e) => {
				if (e.url === "/guanyu") {
					e.url = "/guanyu";
				}
				if (e.url === "/lianxi") {
					e.url = "/lianxi";
				}

				if (e.url === "/goods") {
					e.show = false;
					this.goods = e.child;
					e.child.forEach((ee) => {
						ee.url = `/goods?id=${ee.id}`;
					});
				}

				if (e.url === "/new") {
					this.news = e.child;
					e.show = false;
					e.child.forEach((ee) => {
						ee.url = `/new?id=${ee.id}`;
					});
				}

				if (e.url === "/") {
					e.url = "/";
				}
			});

			this.menuItems = res.data;

			this.$store.commit("set_menuItems", res.data);
		},
		async config() {
			const [err, res] = await this.$to(this.$axios.get("&a=tagglobal"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.$store.commit("set_web_attr", res.data.web_attr);
		},
		goto(e) {
			if (e) {
				this.$router.push(e);
			}
		},
		async tijoao() {
			if (this.lg) {
				if (!this.name) {
					this.$message.error("填写称呼");
					return;
				}
				const regexname = /[\u4e00-\u9fa5]+/;
				if (!regexname.test(this.name)) {
					this.$message.error("填写中文汉字");
					return;
				}
				if (!this.number) {
					this.$message.error("填写手机号码");
					return;
				}
				const regexnumber = /^1[3456789]\d{9}$/;
				if (!regexnumber.test(this.number)) {
					this.$message.error("手机格式不正确");
					return;
				}
			} else {
				if (!this.name) {
					this.$message.error("Fill in the address");
					return;
				}

				const regexname = /^[a-zA-Z]+$/;
				if (!regexname.test(this.name)) {
					this.$message.error("Fill in English");
					return;
				}

				if (!this.number) {
					this.$message.error("Fill in the mobile phone number");
					return;
				}

				const regexnumber = /^1[3456789]\d{9}$/;
				if (!regexnumber.test(this.number)) {
					this.$message.error("The phone format is incorrect");
					return;
				}
			}
			let data = {
				attr_1: this.name,
				attr_2: this.number,
				typeid: 5
			};

			var queryString = "?" + new URLSearchParams(data).toString();
			console.log(queryString);
			const [err, res] = await this.$to(this.$axios.post("?m=api&c=zb&a=gbook_submit&_ajax=1&lang=cn", data));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.$message.error(res.msg);
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/input {
	background: none !important;
	outline: none !important;
	border: 0px !important;
}
</style>
